<template>
    <div class="solid-ball">
        <div class="inner-ball"></div>
    </div>
</template>

<script>
export default {
    name: "solid-ball",
};
</script>

<style lang="less" scoped>
.solid-ball {
    background: linear-gradient(#fff 0, #eee 10%, #2e86fb 50%, #1a237e 100%);
    border-radius: 9999px;
    height: 400px;
    margin: 4rem auto;
    position: relative;
    width: 400px;

    .inner-ball {
        background: linear-gradient(#fff 0, #2e86fb 60%, #283593 100%);
        border-radius: 9999px;
        box-shadow: 0 8px 20px rgb(0 0 0 / 50%);
        height: 360px;
        filter: blur(15px);
        left: 20px;
        position: absolute;
        top: 15px;
        width: 360px;
    }

    &::before,
    &::after {
        border-radius: 200px 200px 9999px 9999px;
        bottom: -10px;
        content: "";
        filter: blur(20px);
        height: 40px;
        position: absolute;
        z-index: -1;
    }

    &::before {
        background: rgba(0, 0, 0, 0.4);
        left: 7.5%;
        width: 85%;
    }

    &::after {
        background: rgba(0, 0, 0, 0.7);
        left: 20%;
        width: 60%;
    }
}
</style>